<template>
  <div ref="chart" style="height: 100%" />
</template>
<script>
import { Chart } from '@antv/g2';
export default {
  name: 'TrackChart',
  props: {
    data: { type: Array, required: true },
    x: { type: String, default: 'x' },
    y: { type: String, default: 'y' },
    s: { type: String, default: 's' },
    color: { type: Array, required: true },
    unit: { type: String, required: true },
    id: { type: String }
  },
  data() {
    return {
      chart: null
    };
  },
  watch: {
    data() {
      this.updateData();
    }
  },
  mounted() {
    this.initChart();
    this.drawChart();
  },
  methods: {
    initChart() {
      const ref = this.$refs.chart;
      // const ratio = window.ratio || 1;
      this.chart = new Chart({
        container: ref,
        width: ref.clientWidth,
        height: ref.clientHeight
      });
    },
    drawChart() {
      const ref = this.$refs.chart;
      const ratio = window.ratio || 1;
      const x = this.x;
      const y = this.y;
      const s = this.s;
      this.chart.data(this.data);
      this.chart.tooltip({
        shared: true,
        showCrosshairs: true,
        crosshairs: {
          line: {
            style: {
              stroke: '#00FDFF',
              lineDash: [3 * ratio, 3 * ratio],
              lineWidth: 1 * ratio
            }
          }
        },
        itemTpl: `
          <div>
            <div style="display: {text}" class="g2-tooltip-zhijia">
              <span class="zhijia-name">支架号</span>
              <span class="zhijia-value">{id}</span>
            </div>
            <li class="g2-tooltip-list-item">
              <span class="g2-tooltip-name">{name}</span>
              <span class="g2-tooltip-value">{value}</span>
            </li>
          </div>
        `,
        customItems: items => {
          items.forEach((item, idx) => {
            item.text = idx ? 'none' : 'visible';
            item.id = item.data[this.id];
          });
          // console.log(items);
          return items;
        },
        domStyles: {
          'g2-tooltip-title': {
            fontSize: '.875rem',
            color: '#8D8D8D',
            lineHeight: '1rem'
          },
          'g2-tooltip-list-item': {
            display: 'flex',
            fontSize: 0,
            overflow: 'hidden'
          },
          'g2-tooltip-name': {
            fontSize: '.75rem',
            color: '#8D8D8D'
          },
          'g2-tooltip-value': {
            fontSize: '.75rem',
            color: 'rgba(0, 0, 0, 0.6)',
            fontWeight: '780'
          },
          'zhijia-name': {
            fontSize: '.75rem',
            color: '#8D8D8D'
          },
          'zhijia-value': {
            fontSize: '.75rem',
            color: 'rgba(0, 0, 0, 0.6)',
            fontWeight: '780',
            marginLeft: '1.875rem'
          }
        }
      });
      this.chart.scale(x, {
        tickCount: 6
      });
      this.chart.scale(y, {
        tickCount: 5
      });
      // x轴
      this.chart.axis(x, {
        label: {
          style: {
            fill: '#ADADAD',
            fontSize: 12 * ratio,
            fontFamily: 'Helvetica-regular'
          },
          offset: 5 * ratio
        },
        line: {
          style: {
            stroke: 'rgba(255, 255, 255, 0.5)'
          }
        },
        tickLine: null
      });
      // y轴
      this.chart.axis(y, {
        label: {
          style: {
            fill: '#ADADAD',
            fontSize: 12 * ratio,
            fontFamily: 'Helvetica-regular'
          },
          offset: 5 * ratio
        },
        grid: null,
        line: {
          style: {
            lineWidth: 1 * ratio,
            stroke: 'rgba(255, 255, 255, 0.5)'
          }
        }
      });
      this.chart.legend(false);
      this.chart
        .line()
        .position(`${x}*${y}`)
        .color(s, this.color)
        .animate({
          appear: {
            animation: 'path-in',
            delay: 0,
            duration: 2000
          },
          update: {
            // animation: 'path-in',
            delay: 0,
            duration: 2000
          }
        });
      // 单位
      this.chart.annotation().text({
        content: this.unit,
        position: ['start', 'start'],
        style: {
          fill: '#ADADAD',
          fontSize: 12 * ratio,
          fontFamily: 'Helvetica-regular'
        },
        background: {
          padding: 2 * ratio
        },
        offsetX: 10 * ratio,
        offsetY: -ref.clientHeight + 22 * ratio
      });
      // this.chart.annotation().text({
      //   content: '架号',
      //   position: ['end', 'start'],
      //   style: {
      //     fill: '#ADADAD',
      //     fontSize: 12 * ratio,
      //     fontFamily: 'Helvetica-regular'
      //   },
      //   background: {
      //     padding: 2 * ratio
      //   },
      //   offsetX: 25 * ratio,
      //   offsetY: 10 * ratio
      // });
      this.chart.render();
    },
    updateData() {
      this.chart.changeData(this.data);
    }
  }
};
</script>
